import React, { Component, Fragment } from "react";
import Form from "./Form";
import List from "./List";

class App extends Component {
  state = {
    // list要用的数据
    list: [
      {
        name: "zhangsan",
        id: 1,
      },
      {
        name: "lisi",
        id: 2,
      },
    ],
  };

  add = (v) => {
    this.setState((prevState) => {
      return {
        list: [...prevState.list, { name: v, id: new Date().getTime() }],
      };
    });
  };

  del = (id) => {
    return () => {
      this.setState((prevState) => {
        return {
          list: prevState.list.filter((item) => item.id !== id),
        };
      });
    };
  };

  render() {
    const { list } = this.state;
    return (
      <Fragment>
        <Form onAdd={this.add} />
        <List list={list} onDel={this.del} />
      </Fragment>
    );
  }
}

export default App;
